import { useState } from 'react';
import { Card, Pagination, Table, Field, Button, Divider, Box, Icon, Message } from '@alifd/next';
import TableEmptyBlock from '@/components/TableEmptyBlock';
import { FormattedDate, FormattedMessage } from 'react-intl';
import { useFusionTable } from 'ahooks';
import Filter from './Filter';
import { apiList, PData, ListVO, resTree, deleteRole } from '../services';
import { RoleTypeEnum, TreeDataSource } from '@/pages/BaseManage/RoleManage/entity';
import EditDialog from './EditDialog';
import AuthorizeDialog from './AuthorizeDialog';
import { useRequest } from 'ice';

function List() {
  const field = Field.useField([{}]);
  const [visible, setVisible] = useState<boolean>(false);
  const [record, setRecord] = useState<ListVO>();
  const [authorizeVisible, setAuthorizeVisible] = useState<boolean>(false);
  const [roleId, setRoleId] = useState<number>();
  const { paginationProps, tableProps, search, error, refresh } = useFusionTable<PData, any>(apiList, {
    field,
    debounceWait: 300,
  });
  const { submit } = search;
  const { data } = useRequest<TreeDataSource[], any>(resTree, {
    manual: false,
  });
  const { request } = useRequest<any, number[]>(deleteRole, {
    onSuccess: () => {
      Message.success('操作成功');
      refresh();
    },
  });

  return (
    <Card.Content>
      <Filter submit={submit} field={field} />
      <Box direction="row" justify="flex-end" align="center" margin={[0, 0, 20, 0]}>
        <Button type="primary" onClick={() => setVisible(true)}>
          <Icon type="add" /> 新增
        </Button>
      </Box>
      <Table
        {...tableProps}
        isZebra
        emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
        primaryKey="id"
      >
        <Table.Column dataIndex="id" title="ID" asyncResizable />
        <Table.Column dataIndex="name" title="角色名称" asyncResizable />
        <Table.Column dataIndex="code" title="角色编码" asyncResizable />
        <Table.Column dataIndex="type" title="角色类型" asyncResizable cell={(v) => RoleTypeEnum[v]} />
        <Table.Column dataIndex="status" title="状态" asyncResizable cell={(v) => (v == '1' ? '启用' : '禁用')} />
        <Table.Column
          dataIndex="createTime"
          title="创建时间"
          asyncResizable
          cell={(val) => <FormattedDate value={val} dateStyle="short" timeStyle="medium" hourCycle="h24" />}
        />
        <Table.Column
          dataIndex="shippingId"
          title="操作"
          cell={(val, i, row) => (
            <>
              <Button type="primary" text onClick={() => request(row.id)}>
                删除
              </Button>
              <Divider direction="ver" />
              <Button
                type="primary"
                text
                onClick={() => {
                  setVisible(true);
                  setRecord(row);
                }}
              >
                编辑
              </Button>
              <Divider direction="ver" />
              <Button
                type="primary"
                text
                onClick={() => {
                  setRoleId(row.id);
                  setAuthorizeVisible(true);
                }}
              >
                授权
              </Button>
            </>
          )}
        />
      </Table>
      <Pagination
        style={{ marginTop: 16, textAlign: 'right' }}
        shape="arrow-only"
        totalRender={(total) => <FormattedMessage id="page.total" tagName="div" values={{ total }} />}
        {...paginationProps}
      />
      <EditDialog
        visible={visible}
        onRefresh={refresh}
        record={record}
        onClose={() => {
          setRecord(undefined);
          setVisible(false);
        }}
      />
      <AuthorizeDialog
        visible={authorizeVisible}
        onClose={() => {
          setRoleId(undefined);
          setAuthorizeVisible(false);
        }}
        treeData={data}
        roleId={roleId}
      />
    </Card.Content>
  );
}

export default List;
